 *{
            margin: 0;
            padding: 0;
            background-color: black;
            opacity: .9;
        }
        body{
            width: 100%;
            height: 100vh;
        }
        canvas {
            position: fixed;
            width: 100%;
            height: 100%;
        }
        a{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 600px;
            height: 180px;
            text-align: center;
            line-height: 180px;
            color: #fff;
            font-size: 44px;
            text-decoration: none;
            font-family: cursive;
            box-sizing: border-box;
            border-radius: 90px;
            z-index: 1;
            background: linear-gradient(90deg, #03a9f4,#f441a5,#ffeb3b,#03a9f4);
            background-size: 400%;
        }

        a:hover{
            animation: move 8s linear infinite;
        }

        a::before{      
            content: '';
            position: absolute;
            inset: -15px;
            z-index: -1;
            background: 
            linear-gradient(90deg, #03a9f4,#f441a5,#ffeb3b,#03a9f4);
            background-size: 400%;
            border-radius: 90px;
            opacity: 0;
            /* transition: 2S; */
        }

        a:hover::before{
            filter: blur(80px);    
            opacity: 1;
            animation: move 8s linear infinite;
        }

        @keyframes move{
            0%{
                background-position: 0%;
            }
            50%{
                background-position: 400%;
            }
            100%{
                background-position: 0%;
            }
        }